<template>
  <!-- 左边：标签导航栏 -->
  <div
    class="fixed top-[64px] h-[44px] px-2 right-0 z-50 flex items-center bg-white transition-all duration-300 shadow"
    :style="{ left: menuStore.menuWidth }"
    style="
      margin-left: 20px;
      border-top: 3px solid transparent;
      background:
        linear-gradient(white 0 0) padding-box,
        linear-gradient(90deg, #409eff, #67c23a, #e6a23c, #f56c6c) border-box;
    "
  >
    <!-- 顶部彩色渐变线已通过 border-top 实现 -->
    <el-tabs
      v-model="activeTab"
      type="card"
      class="demo-tabs"
      @tab-remove="removeTab"
      @tab-change="tabChange"
      style="min-width: 10px"
    >
      <el-tab-pane
        v-for="item in tabList"
        :key="item.path"
        :label="item.title"
        :name="item.path"
        :closable="item.path != '/admin/index'"
      ></el-tab-pane>
    </el-tabs>

    <!-- 右侧下拉菜单 -->
    <span class="ml-auto flex items-center justify-center h-[32px] w-[32px]">
      <el-dropdown @command="handleCloseTab">
        <span class="el-dropdown-link">
          <el-icon>
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="closeOthers">关闭其他</el-dropdown-item>
            <el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
  <div class="h-[44px]"></div>
</template>

<script setup>
  import { useTabList } from "@/composables/useTagList.js";

  const { menuStore, activeTab, tabList, tabChange, removeTab, handleCloseTab } = useTabList();
</script>

<style>
  /* 定义圆角变量，方便调整 */
  :root {
    --tab-top-radius: 13px; /* 上方圆角大小，可根据需要调整 */
    --tab-bottom-radius: 16px; /* 下方圆角大小 */
  }

  /* 标签项基础样式 - 上方圆角较小，下方圆角较大 */
  .el-tabs__item {
    font-size: 12px;
    border: 1px solid #d8dce5 !important;
    border-radius: var(--tab-top-radius) var(--tab-top-radius) var(--tab-bottom-radius) var(--tab-bottom-radius) !important;
  }

  /* 卡片样式下的标签项间距调整 */
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    margin-left: 0.1rem !important;
    margin-right: 0.1rem !important;
    margin-top: -1px; /* 上移1px，贴近彩色线 */
  }

  /* 激活状态标签样式 */
  .el-tabs__item.is-active {
    background-color: var(--el-color-primary) !important;
    color: #fff;
    margin-top: -1px; /* 激活状态也贴近彩色线 */
  }

  /* 激活标签前的小圆点指示器 */
  .el-tabs__item.is-active::before {
    content: "";
    background-color: #fff;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: relative;
    margin-right: 4px;
  }

  /* 标签容器高度设置 */
  .el-tabs {
    height: 32px;
  }

  /* 标签头部样式 - 移除默认的margin，让标签项更贴近容器顶部 */
  .el-tabs__header {
    margin-bottom: 0;
    padding-top: 0;
    margin-top: 0;
  }

  /* 移除卡片样式下的导航容器边框 */
  .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: 0;
  }

  /* 卡片样式下的标签项样式 - 确保圆角和边框，并贴近彩色线 */
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    height: 35px;
    line-height: 40px;
    border: 1px solid #d8dce5;
    background: #fff;
    border-radius: var(--tab-top-radius) var(--tab-top-radius) var(--tab-bottom-radius) var(--tab-bottom-radius);
    position: relative;
    z-index: 1;
  }

  /* 移除卡片样式下的头部边框 */
  .el-tabs--card > .el-tabs__header {
    border: 0;
  }

  /* 导航箭头样式调整 */
  .el-tabs__nav-prev,
  .el-tabs__nav-next {
    line-height: 35px;
  }

  /* 禁用状态样式 */
  .is-disabled {
    cursor: not-allowed;
    color: #d1d5db;
  }
</style>
